<template>
  <div class="widget-config">


    <el-collapse v-if="this.data && Object.keys(this.data).length > 0" v-model="collapse">
      <el-collapse-item v-if="!['title'].includes(data.type)" name="1" title="基本属性">

        <el-form-item label="UI组件类型" v-if="data.type">
          <el-select style="width: 100%" filterable v-model="data.type" placeholder="请选择UI组件类型"
                     @change="handleChangeType">
            <el-option-group v-for="group in fields" :key="group.title" :label="group.title">
              <el-option v-for="item in group.list"
                         :key="item.type"
                         :label="item.label"
                         :value="item.type">
              </el-option>
            </el-option-group>
          </el-select>
        </el-form-item>
        <el-form-item label="标题">
          <el-input style="width: 100%" v-model="data.label" clearable placeholder="标题"></el-input>
        </el-form-item>
        <el-form-item label="属性名称">
          <avue-input style="width: 100%" v-model="data.prop" :maxlength="32" clearable
                      placeholder="属性名称"></avue-input>
        </el-form-item>
        <el-form-item label="数据类型">
          <el-input style="width: 100%" v-model="data.sqlDataType" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="数据长度">
          <el-input-number style="width: 100%" v-model="data.sqlDataLength"
                           :min="0"
                           placeholder="请输入数据长度"></el-input-number>
        </el-form-item>
        <el-form-item label="占位内容">
          <el-input v-model="data.placeholder"
                    placeholder="占位内容"></el-input>
        </el-form-item>
        <el-form-item label="标签对齐方式">
          <el-select v-model="data.labelPosition"
                     placeholder="标签对齐方式">
            <el-option label="左对齐"
                       value="left"></el-option>
            <el-option label="右对齐"
                       value="right"></el-option>
            <el-option label="顶部对齐"
                       value="top"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签宽度">
          <el-input-number v-model="data.labelWidth"
                           :min="0"
                           :max="200"
                           :step="10"
                           controls-position="right"
                           placeholder="标签宽度"
                           style="width: 100%"></el-input-number>
        </el-form-item>
        <el-form-item label="前缀" v-if="data.type==='text'">
          <el-input v-model="data.prepend"
                    placeholder="前缀"></el-input>
        </el-form-item>
        <el-form-item label="后缀" v-if="data.type==='text'">
          <el-input v-model="data.append"
                    placeholder="后缀"></el-input>
        </el-form-item>

      </el-collapse-item>

      <el-collapse-item name="5" title="组件属性">
        <component :is="getComponent" :data="data"></component>
      </el-collapse-item>
      <el-collapse-item name="4" title="校验">
        <el-form-item label="是否必填">
          <el-switch v-model="data.required"></el-switch>
        </el-form-item>
        <el-form-item label="正则表达式">
          <el-input type="textarea" v-model.lazy="data.pattern"
                    placeholder="正则表达式"></el-input>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item name="3" title="组件状态">
        <el-form-item label="全局是否禁用">
          <el-radio-group v-model="data.disabled" size="small">
            <el-radio v-for="(item,index) in formFieldHandlerState.disabled" :key="'data.addDisplay'+index"
                      :value="item.value" border>{{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="全局是否可见">
          <el-radio-group v-model="data.display" size="small">
            <el-radio v-for="(item,index) in formFieldHandlerState.display" :key="'data.addDisplay'+index"
                      :value="item.value" border>{{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="新增时是否可见">
          <el-radio-group v-model="data.addDisplay" size="small">
            <el-radio v-for="(item,index) in formFieldHandlerState.display" :key="'data.addDisplay'+index"
                      :value="item.value" border>{{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="新增时是否禁用">
          <el-radio-group v-model="data.addDisabled" size="small">
            <el-radio v-for="(item,index) in formFieldHandlerState.disabled" :key="'data.disabled'+index"
                      :value="item.value" border>{{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="修改时是否可见">
          <el-radio-group v-model="data.editDisplay" size="small">
            <el-radio v-for="(item,index) in formFieldHandlerState.display" :key="'data.addDisplay'+index"
                      :value="item.value" border>{{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="修改时是否禁用">
          <el-radio-group v-model="data.editDisabled" size="small">
            <el-radio v-for="(item,index) in formFieldHandlerState.disabled" :key="'data.disabled'+index"
                      :value="item.value" border>{{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否显示在表格中">
          <el-radio-group v-model="data.hide" size="small">
            <el-radio v-for="(item,index) in formFieldHandlerState.hide" :key="'data.hide'+index"
                      :value="item.value" border>{{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="启用搜索">
          <el-radio-group v-model="data.search" size="small">
            <el-radio v-for="(item,index) in formFieldHandlerState.search" :key="'data.disabled'+index"
                      :value="item.value" border>{{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-show="data.search">
          <el-form-item label="搜索模式">
            <el-select style="width: 100%" v-model="data.searchModel" placeholder="请选择搜索模式">
              <el-option v-for="item in formFieldHandlerState.searchModels"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="搜索宽度">
            <el-input-number style="width: 100%" v-model="data.searchSpan" controls-position="right"
                             placeholder="搜索宽度" :min="6" :max="24"></el-input-number>
          </el-form-item>
          <el-form-item label="搜索标签宽度">
            <el-input-number style="width: 100%" v-model="data.searchLabelWidth" controls-position="right"
                             placeholder="搜索标签宽度" :min="80" :max="1000"></el-input-number>
          </el-form-item>
        </div>
      </el-collapse-item>
      <el-collapse-item name="2" title="布局">
        <el-form-item label="宽度" v-if="data.subfield">
          <el-input-number style="width: 100%" v-model="data.width" controls-position="right" placeholder="宽度"
                           :min="100"></el-input-number>
        </el-form-item>
        <el-form-item label="表单栅格" v-if="!data.subfield && !['group'].includes(data.type)">
          <el-input-number style="width: 100%" v-model="data.span" controls-position="right" placeholder="表单栅格"
                           :min="8" :max="24"></el-input-number>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item name="6" title="事件属性" v-if="!['group', 'dynamic'].includes(data.type)">
        <el-form-item label="change">
          <avue-input v-model="data.change"
                      type="textarea"
                      placeholder="改变事件"
                      rows="5"
                      clearable></avue-input>
        </el-form-item>
        <el-form-item label="click">
          <el-input v-model="data.click" type="textarea" placeholder="点击事件" rows="5"></el-input>
        </el-form-item>
        <el-form-item label="focus">
          <el-input v-model="data.focus"
                    type="textarea"
                    placeholder="获取焦点事件"
                    rows="5"></el-input>
        </el-form-item>
        <el-form-item label="blur">
          <el-input v-model="data.blur"
                    type="textarea"
                    placeholder="失去焦点事件"
                    rows="5"></el-input>
        </el-form-item>
      </el-collapse-item>
    </el-collapse>
    <avue-empty v-else desc="拖拽字段进行配置" style="margin-top: 100%;"></avue-empty>
  </div>
</template>

<script>
import fields, {dateTypes, formFieldHandlerState} from './fieldsConfig.js'
import index from "./config/index"

let configComponent = index.getConfigComponent();
const dateArr = [
  'year', 'month', 'week', 'date', 'datetime', 'time', 'daterange', 'timerange', 'datetimerange', 'dates'
]

export default {
  name: 'widget-config',
  components: {...configComponent},
  props: ['data', 'sqlTypeMapper'],
  computed: {
    getComponent() {
      const prefix = 'config-'
      let type = this.data.type;
      let component = this.data.component;
      type = type || component
      let result = 'input'
      if ([undefined, null, 'input', 'password', 'url'].includes(type)) result = 'input'
      else if (dateArr.includes(type)) result = 'date'
      else if (['array', 'img'].includes(type)) result = 'array'
      else result = type
      result = prefix + result;
      return result
    },
  },
  watch: {},
  data() {
    return {
      formModel: {},
      dateTypes,
      formFieldHandlerState,
      fields,
      collapse: "1",
    }
  },
  methods: {
    async handleChangeType(type) {
      if (!type) {
        return
      }
      const config = this.getConfigByType(type);
      if (!config) return
      config.prop = this.data.prop;
      let tempData = {};
      for (let key in config) {
        if (config && Object.prototype.hasOwnProperty.call(config, key) && !['icon', 'label', 'span'].includes(key)) {
          tempData[key] = config[key]
        }
      }
      tempData = Object.assign({}, this.data, tempData)
      this.$emit("update:data", tempData)
    },
    getConfigByType(type) {
      for (let i = 0; i < fields.length; i++) {
        let list = fields[i].list || []
        if (list.length < 1) continue
        for (let j = 0; j < list.length; j++) {
          let config = list[j];
          if (config.type === type) {
            return config;
          }
        }
      }
      return null
    }
  }
}
</script>
